<template>
	
	<view class="da" @touch.prevent>
		<block v-for="(item,index) in carts.slice().reverse()" :key="item.id">
			<uni-swipe-action-item :right-options="options" @click="bindClick(item.id)" :show="item.isShow"
				:auto-close="false" @change="change($event,item.id)">
				<view class="div" v-if="item.show==false" :class="{style:(index == carts.length-1)}">
					<view class="check" @click="danx(item.id)">
						<image src="../../static/cz_zc@2x.png" mode="widthFix" v-show="item.selected==false"></image>
						<image src="../../static/cz_xz@2x.png" mode="widthFix" v-show="item.selected"></image>
					</view>
					<view class="img">
						<image :src="item.goodImg" mode="widthFix"></image>
					</view>
					<view class="xx">
						<view class="name">
							<label>{{item.goodName}}</label>
						</view>
						<view class="line">
							<label>{{item.type}}</label>
						</view>
						<view class="price">
							<label v-if="item.count > 0">￥{{item.goodPrice * item.count}}</label>
							<label v-if="item.count < 1">￥{{item.goodPrice}}</label>
						</view>
						<view class="sold">
							<label v-if="item.count > 0">￥{{item.goodSold * item.count}}</label>
							<label v-if="item.count < 1">￥{{item.goodSold}}</label>
						</view>
					</view>
					<view class="add">
						<button @click="toggle(-1,item.id)">-</button>
						<text>{{item.count}}</text>
						<button @click="toggle(1,item.id)">+</button>
					</view>
				</view>
			</uni-swipe-action-item>
		</block>


		<view class="end">
			<view class="end-left">
				<view class="check2">
					<image src="../../static/cz_xz@2x.png" mode="widthFix" @click="quanx()" v-show="checkAll"></image>
					<image src="../../static/cz_zc@2x.png" mode="widthFix" @click="quanx()" v-show="checkAll==false">
					</image>
					<label>全选</label>
				</view>
				<view>
					合计：<label>￥{{sumPrice}}</label>
				</view>
			</view>
			<view class="end-right" @click="btn()">
				结算
			</view>
		</view>

	</view>
</template>

<script>
	import {
		apiCart
	} from '../../api/mock';
	import colorGradient from '../../uni_modules/uview-ui/libs/function/colorGradient';
	export default {
		data() {
			return {
				carts: [],
				checkAll: false,
				checkList: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				index: 0,
			}
		},
		onLoad() {
			this.checkList = [];
			this.checkAll = false;
		},
		onShow() {
			this.add();
		},
		methods: {
			btn() {
				if(this.sumPrice !=0){
					let arr = []
					let item;
					for(let i=this.carts.length-1;i>=0;i--){
						item = this.carts[i]
						if(item.selected){
							let good = {
								goodsUrl : item.goodImg,
								title : item.goodName,
								type : item.type,
								deliveryTime : '付款后30天内发货',
								price : item.goodSold,
								number : item.count
							}
							arr.push(good)
							this.carts.splice(i,1)
						}
					}
					let dd = {
						deal : '待付款',
						buy_time : new Date(),
						goodsList : arr,
						timeupSecond : null
					}
					uni.setStorageSync('dd', dd);
					uni.navigateTo({
						url: '/page_order/order/order?index=0'
					})
				}else{
					uni.showToast({
							title: '请先选择商品',
							icon:'error',
							duration: 2000
						});
				}
				this.checkAll = this.carts.every(item => item.selected)
				if(this.carts.length == 0){
					this.checkAll = false;
				}
			},
			change(e, index) {
				console.log(e);
				console.log(index);
				this.index = index;
				let s = this.carts.find((item) => item.id == index)
				s.isShow = e;
			},
			bindClick(e) {
				let index = this.carts.findIndex(item => item.id === e);

				if (index !== -1) {
					uni.showModal({
						content: '是否删除该商品',
						success: (res) => {
							if (res.confirm) {
								this.carts.splice(index, 1);
								if (this.carts.length == 0) {
									this.checkAll = false;
								}
							}
							let s = this.carts.find((item) => item.id == this.index)
							if (s) {
								s.isShow = 'none';
							}
						}
					})
				}
			},
			add() {
				var cart = uni.getStorageSync('cart');
				console.log(cart);
				console.log(this.carts);
				let b = true;
				if (this.carts == ''&& cart != '') {
					cart.id = 1;
					this.carts.push(cart);
				} else if (this.carts != '' && cart != '') {
					for (let i = 0; i < this.carts.length; i++) {
						if (this.carts[i].goodName == cart.goodName && this.carts[i].type == cart.type) {
							this.carts[i].count = this.carts[i].count + cart.count;
							b = false;
						}
					}

					if (b) {
						cart.id = Number(this.carts[this.carts.length - 1].id) + 1;
						this.carts.push(cart);

					}
					console.log(this.carts);
				}
				uni.removeStorageSync('cart');
			},
			quanx() {
				this.checkAll = !this.checkAll;
				if (this.checkAll) {
					this.carts.forEach((item) => {
						item.selected = true;
					})
				} else if (this.checkAll == false) {
					this.carts.forEach((item) => {
						item.selected = false;
					})
				}
			},
			danx(id) {
				this.carts.forEach((item) => {
					if (item.id == id) {
						item.selected = !item.selected
						this.checkAll = this.carts.every(item => item.selected)
					}
				})
			},
			toggle(x, id) {
				let that = this;
				this.carts.forEach((item) => {
					if (item.id == id) {
						item.count = item.count + x;
						item.selected = true;
						if (item.count < 1) {
							uni.showModal({
								content: '是否删除该商品',
								success: function(res) {
									if (res.confirm) {
										for (let i = that.carts.length - 1; i >= 0; i--) {
											if (that.carts[i] == item) {
												that.carts.splice(i, 1)
											}
										}
										if (that.carts.length == 0) {
											that.checkAll = false;
										}
										item.show = true;
									} else if (res.cancel) {
										item.count = 1;
									}
								}
							})

						}
					}
				})
				this.checkAll = this.carts.every(item => item.selected)
			}
		},
		computed: {
			sumPrice() {
				let sum = 0;
				for (let i = 0; i < this.carts.length; i++) {
					if (this.carts[i].selected) {
						sum += this.carts[i].count * this.carts[i].goodSold;
					}
				}
				return sum;
			}
		}
	}
</script>

<style lang="scss">
	.style {
		padding-bottom: 50px;
	}


	.div {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20px;
		margin-bottom: 30px;

		.check {
			image {
				width: 20px;
				height: auto;
			}
		}

		.img {
			image {
				width: 100px;
				height: auto;
			}
		}

		.xx {
			margin-left: 5px;

			view {
				margin-top: 5px;
			}

			.name {
				width: 9em;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				label {
					color: #434343;
					;
				}
			}
			
			.line{
				color: gray;
				font-size: 14px;
			}

			.price {
				label {
					color: #c3c3c3;
					font-size: 10px;
				}
			}

			.sold {
				label {
					font-weight: bold;
				}
			}
		}

		.add {
			display: flex;
			align-items: center;
			margin-top: 80px;

			button {
				height: 25px;
				width: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 2px;
				margin-right: 2px;
			}

			text {
				display: flex;
				align-items: center;
				justify-content: center;

				height: 25px;
				width: 30px;
				background-color: #f8f8f8;
			}
		}

	}

	.end {
		margin-bottom: -10rpx;
		width: 100%;
		height: 50px;
		background-color: whitesmoke;
		position: fixed;
		bottom: 0px;
		/* #ifdef H5 */
		bottom: 55px;
		/* #endif */
		left: 0;
		display: flex;
		align-items: center;

		.end-left {
			width: 70%;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			display: flex;
			align-items: center;

			.check2 {
				display: flex;
				align-items: center;

				image {
					width: 20px;
					margin-right: 5px;
					height: auto;
				}
			}
		}

		.end-right {
			height: 40px;
			width: 20%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: red;
			color: white;
			border-radius: 40px;
		}
	}
</style>